<script setup>
import { Field } from "@ark-ui/vue/field";
</script>

<template>
  <Field.Root class="max-w-sm w-full">
    <Field.Label class="text-sm font-medium text-gray-900 dark:text-gray-100">
      Newsletter Subscription
    </Field.Label>
    <div
      class="mt-1 flex rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus-within:border-gray-900 dark:focus-within:border-gray-100 focus-within:ring-1 focus-within:ring-gray-900 dark:focus-within:ring-gray-100"
    >
      <Field.Input
        type="email"
        placeholder="Enter your email address"
        class="min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-0"
      />
      <div class="border-l border-gray-300 dark:border-gray-600" />
      <button
        class="border-0 bg-transparent px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-hidden focus:ring-0"
      >
        Send
      </button>
    </div>
  </Field.Root>
</template>
